<template>
	<div class="index_content_box">
		<div class="head">
			<div class="icon" :style="{ '--iconColor': iconColor }">
				<span>{{ iconText }}</span>
			</div>
			<h2>{{ title }}</h2>
			<template v-if="!!to">
				<router-link :to="to">
					更多
					<i class="el-icon-arrow-right"></i>
				</router-link>
			</template>
		</div>
		<slot></slot>
	</div>
</template>

<script>
export default {
	props: {
		title: { type: String },
		iconText: String,
		iconColor: String,
		to: String
	}
};
</script>

<style lang="scss" scoped>
.index_content_box {
	.head {
		display: flex;
		align-items: center;
		.icon {
			display: block;
			width: 64px;
			height: 24px;
			margin-left: 2px;
			position: relative;
			&::before {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				content: '';
				transform: skew(-10deg);
				background-color: var(--iconColor);
				z-index: 1;
			}
			&::after {
				position: absolute;
				bottom: 0;
				right: -6px;
				content: '';
				border-bottom: solid 6px var(--iconColor);
				border-right: solid 8px transparent;
			}
			span {
				display: block;
				position: relative;
				z-index: 2;
				color: #fff;
				font-size: 16px;
				font-weight: bold;
				line-height: 24px;
				text-align: center;
				font-style: italic;
			}
		}
		h2 {
			font-size: 32px;
			margin: 0 30px 0 16px;
		}
		a {
			display: flex;
			align-items: center;
			color: #666;
			text-decoration: none;
			i {
				display: block;
				width: 16px;
				height: 16px;
				color: #fff;
				line-height: 16px;
				text-align: center;
				border-radius: 50%;
				background-color: #666;
				margin-left: 6px;
			}
		}
	}
}
</style>
